<template>
  <div class="container">
    <u-form-item label="附件:" label-width="100">
      <view class="img_list flex">
        <view v-for="item in imgList" :key="item.id" class="flex img_item">
          <image
            :src="item.filename"
            mode="scaleToFill"
            @click="previewImage(item.filename)"
          />
        </view>
      </view>
    </u-form-item>
    <view class="file_list">
      <view v-for="(item, index) in fileList" :key="item.id">
        <view class="flex_sb" style="margin-bottom: 10rpx">
          <view class="flex">
            <view class="xh">({{ index + 1 }})</view>
            <view class="originalname overflow_1">{{ item.originalname }}</view>
          </view>
          <view class="download flex_sb">
            <view
              class="flex download_btn"
              @click="handlerDownload(item.filename)"
              >下载</view
            >
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import {
  filterOutImages,
  filterImageFiles,
  downloadAndOpenFile,
} from '@/utils/index.js'
import { getFileInfoApi } from '@/apis/globalSbmitForm.js'
import { config } from '@/common/config.js'
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
})

// 附件数据
const fileData = ref([])

// 获取附件信息
const getFileData = async (id) => {
  if (!id) {
    fileData.value = []
    return
  }

  try {
    const res = await getFileInfoApi({ pkid: id })
    fileData.value = res.rows || []
    console.log('fileData', fileData)
  } catch (error) {
    uni.$u.toast('获取附件信息失败')
  }
}

// 监听id变化
watch(
  () => props.id,
  (newId) => {
    getFileData(newId)
  },
  { immediate: true }
)

// 组件挂载时获取数据
// onMounted(() => {
//   if (props.id) {
//     getFileData(props.id)
//   }
// })

// 获取图片
const imgList = computed(() => {
  const list = filterImageFiles(fileData.value)
  if (!list.length) return []
  return list.map((item) => {
    return {
      ...item,
      filename: config.baseUrl + item.filename,
    }
  })
})

// 获取非图片文件
const fileList = computed(() => {
  return filterOutImages(fileData.value)
})

// 下载附件
const handlerDownload = async (filename) => {
  try {
    await downloadAndOpenFile(filename, {
      header: {
        myid: String(1),
      },
    })
  } catch (error) {
    console.error('下载文件处理失败:', error)
    // 错误处理已在downloadAndOpenFile函数内部完成
  }
}

// 预览图片
const previewImage = (current) => {
  // 获取所有图片的URL数组
  const urls = imgList.value.map((item) => item.filename)

  uni.previewImage({
    current,
    urls,
    success: function (res) {
      console.log('图片预览成功', res)
    },
    fail: function (error) {
      console.log('图片预览失败', error)
      uni.$u.toast('图片预览失败')
    },
  })
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
}

.img_list {
  justify-content: flex-start;

  .img_item {
    position: relative;
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }

  image {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

.file_list {
  font-size: 28rpx;
  width: 100%;

  .xh {
    width: 50rpx;
  }

  .originalname {
    flex: 1;
  }

  .download {
    width: 80rpx;
    display: flex;
    justify-content: flex-end;
  }

  .download_btn {
    width: 80rpx;
    padding: 10rpx 0;
    background: #dbf1e1;
    border: 1rpx solid #a5e3c2;
    color: #2ecdbf;
    text-align: center;
  }
}
</style>
